<template>
  <div class="test">
    <div class="start-btn" v-if="isStart === 0" @click="start">开始</div>
    <div class="countdown" v-else-if="isStart === 1">
      {{ countdown }}
    </div>
    <div class="item-wrap" v-show="isStart === 2">
      <div class="tip-wrap">
        <div class="tip" v-if="!isSubmit">注意：除法保留两位小数</div>
        <div class="tip" v-else>你的得分为: {{score}}</div>
        <div class="time">{{ time }}</div>
      </div>
      <div class="item" v-for="(item, index) in testArr" :key="index">
        <div class="item-left">
          <div class="item-str">
            <span class="item-num">{{ index + 1 + "." }}</span
            >{{ item.str }}
          </div>
          <input type="text" v-model="item.res1" />
        </div>
        <div class="item-right" v-if="isSubmit">
          <div class="item-icon">{{ item.icon }}</div>
          <div class="item-res" v-if="!item.isTrue">答案：{{ item.res2 }}</div>
        </div>
      </div>
      <div class="start-btn btn" @click="submit" v-if="!isSubmit">提交</div>
      <div class="start-btn btn" @click="again(1)"  v-else>再来一次</div>
    </div>
  </div>
</template>

<script>
import { creatTest, creatTest1 } from "./test";
export default {
  data() {
    return {
      testArr: [],
      isStart: 0,
      isSubmit: false,
      time: "00:00",
      timer: null,
      countdown: 3,
      score : 0,
    };
  },
  watch: {
    $route(to, from) {
      this.isStart = 0;
      this.countdown = 3;
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      this.again();
      console.log(to.params.id, "to");
      
    },
  },
  mounted() {
    for (let i = 0; i < 20; i++) {
      let obj = creatTest();
      this.testArr.push({
        str: obj.testStr,
        res1: "",
        res2: obj.res2,
        isTrue: false,
        icon: "×",
      });
    }
  },
  methods: {
    start() {
      this.isStart = 1;
      let time = setInterval(() => {
        this.countdown--;
        if (this.countdown === 0) {
          clearInterval(time);
          this.isStart = 2;
          this.startTime();
        }
      }, 1000);
    },
    startTime() {
      let s = 0;
      let m = 0;
      this.timer = setInterval(() => {
        s++;
        if (s >= 60) {
          s = 0;
          m++;
        }
        let ss = s >= 10 ? s : "0" + s;
        let mm = m >= 10 ? m : "0" + m;
        this.time = mm + ":" + ss;
        console.log(this.time);
      }, 1000);
    },
    endTime() {
      clearInterval(this.timer);
    },
    async submit() {
    console.log(111);
      if (this.isSubmit) {
        return;
      }
      this.isSubmit = true;
      this.endTime();
      for(let i = 0; i < this.testArr.length; i ++){
          if(this.testArr[i].res1 === this.testArr[i].res2){
              this.score += 5;
              this.testArr[i].icon = '√'
          }
      }
        console.log(this.score,'0');
      const uid = JSON.parse(localStorage.getItem('user')).uid;
      const obj = {
        uid,
        score: this.score
      }
      const res = await this.$http.post('http://localhost:3000/addScore',obj)
      console.log(res,'test');
    },
    again(index) {
      if(index === 1){
          this.startTime();
      }
      this.time = "00:00";
      this.testArr = [];
      this.isSubmit = false;
      this.score = 0;
      let id = this.$route.params.id;
      let obj;
      if (id === "0") {
        for (let i = 0; i < 20; i++) {
          obj = creatTest();
          this.testArr.push({
            str: obj.testStr,
            res1: "",
            res2: obj.res2,
            isTrue: false,
            icon: "×",
          });
        }
      } else {
        for (let i = 0; i < 20; i++) {
          obj = creatTest1();
          this.testArr.push({
            str: obj.testStr,
            res1: "",
            res2: obj.res2,
            isTrue: false,
            icon: "×",
          });
        }
        console.log(this.testArr);
      }
    },
  },
};
</script>

<style lang='less' scoped>
.test {
  width: 1200px;
  // border: 1px solid #ccc;
  margin: 20px auto;
  //   height: 50px;
  padding: 80px;
  margin-top: 150px;
  .start-btn {
    margin: 0px auto;
    width: 160px;
    padding: 10px 0;
    text-align: center;
    background-color: #38f;
    border-radius: 20px;
    cursor: pointer;
    color: #fff;
    user-select: none;
  }
  .start-btn:active {
    transform: scale(1.02);
  }
  .countdown {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #38f;
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    margin: 0 auto;
  }
  .item-wrap {
    //   border: 1px solid #ccc;
    padding: 20px;
    .tip-wrap {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .item {
      display: flex;
      flex-direction: column;
      border: 1px solid #ccc;
      //   border-bottom: none;
      padding: 10px;
      font-size: 20px;
      .item-left {
        display: flex;
        margin-bottom: 20px;
        justify-content: space-between;
        .item-num {
          display: inline-block;
          color: #37f;
          font-weight: bold;
          margin-right: 5px;
        }
      }
      .item-right {
        display: flex;
        flex-direction: row-reverse;
        .item-icon {
        }
        .item-res {
          margin-right: 20px;
        }
      }
    }
    .btn{
        margin-top: 40px;
    }
  }

}
</style>